import React, {PureComponent} from 'react'
import Table from '../base/base-table'
import Input from 'antd/lib/input'
import Icon from 'antd/lib/icon'
import {connect} from 'react-redux'
import {getTodayOrder} from '../../action/map.action'
import {millToString} from '../../util/util'
const columns = [
    // {
    //     title: '序号',
    //     dataIndex: 'name',
    //     key: 'name',
    //     width: '10%',
    //     render: (val, row, index) => {
    //         return index + 1
    //     }
    // },
    {
        title: '备货单号',
        dataIndex: 'stockNo',
        key: 'stockNo',
        width: '25%',
    }, {
        title: '总件数',
        dataIndex: 'count',
        key: 'count',
        width: '10%',
    },
    {
        title: '当前状态',
        dataIndex: 'status',
        key: 'status',
        width: '15%',
    },
    {
        title: '合同号',
        dataIndex: 'orderNo',
        key: 'orderNo',
        width: '20%',
    },
    {
        title: '计划完成时间',
        dataIndex: 'deadline',
        key: 'deadline',
        width: '40%',
        render: val => millToString(val)
    }
];

class TallyingTable extends PureComponent {
    constructor() {
        super()
    }

    shouldComponentUpdate(nextProps) {
        return nextProps.todayOrder !== this.props.todayOrder
    }

    componentDidMount() {
        const {dispatch} = this.props
        dispatch(getTodayOrder({}))
    }



    render() {
        const {todayOrder} = this.props
        const data = todayOrder.toJS()
        data.forEach((t,i)=>{
            t.key = `today-order-table-${i}`
        })
        return (
            <div className="tallying-table-container">
                <p>今日订单进度看板</p>
                <div className="tallying-table-box">
                    <Table columns={columns} dataSource={data} pagination={{pageSize: 15}}/>
                </div>
            </div>
        )
    }

}

function mapStateToProps({todayOrder}) {
    return {todayOrder}
}

export default connect(mapStateToProps)(TallyingTable)